<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"/>
	<link rel="stylesheet" href="../static/layui/css/layui.css" />
	<link rel="stylesheet" href="../static/css/index.css"/>
	<link rel="stylesheet" href="../static/css/userIndex.css" />
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
		    <div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="../index.html" class="navbar-brand hidden-sm">二手图书交易网</a>
				</div>
				<div class="navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav">
						<li><a href="../index.html">首页</a></li>
						<li><a href="../order/orderList.html">我的订单</a></li>
						<li><a href="../goods/editGoods.html">我要卖书</a></li>
						<li><a id="reCharge">充值</a></li>
					</ul>
					<ul id="logged_in" class="nav navbar-nav navbar-right hidden-sm">
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown">当前用户<i id="name"></i> <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="/mailbox/mailbox.html">邮件</a></li>
								<li><a href="/META-INF/html/user/userIndex.html">个人中心</a></li>
							</ul>
						</li>
						<li><a id="logout" onclick="logout()">退出登录</a></li>
					</ul>
				</div>
		    </div>
		</div>	
		<div class="rqy-container">
			<div class="left">
				<div class="person-data">
					<div class="Head-portrait">
						<img src="../static/img/111.jpg"/>
					</div>
					<div class="user-name"><span class="name"></span></div>
					<button class="account_manager"><a href="userinfo.html">修改资料</a></button>
				</div>
				<div class="function-list">
					<ul id="myTab" class="function-demo" >
					    <li class="active"> <a href="#MyInfomation" data-toggle="tab" >我的资料</a></li>
					    <li><a id="toMyGoods" href="#AllMyGoods" data-toggle="tab" >我卖的书</a></li>
					    <li><a id="toMyDiscuss" href="#AllMyDiscuss" data-toggle="tab" >我的评论</a></li>
					</ul>
				</div>
			</div>
			
			<div id="myTabContent" class="tab-content">
				<!-- ----------------------------------------------我的帖子------------------------------------------------- -->
				<div class="tab-pane fade in active" id="MyInfomation">
				    <div class="container">
						<div class="craft-inform">
							<h2>我的资料</h2>
							<hr/>
							<form class="form-horizontal">
							  <div class="form-group">
							    <label class="col-sm-3 control-label">用户名：</label>
							    <div class="col-sm-8">
							      <p class="name form-control-static"></p>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-3 control-label">余额：</label>
							    <div class="col-sm-8">
							      <p class="balance form-control-static"></p>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-3 control-label">性别：</label>
							    <div class="col-sm-8">
							      <p class="sex form-control-static"></p>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-3 control-label">电话：</label>
							    <div class="col-sm-8">
							      <p class="phone form-control-static"></p>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-3 control-label">地址：</label>
							    <div class="col-sm-8">
							      <p class="address form-control-static"></p>
							    </div>
							  </div>
							</form>
						</div>
				    </div>
				</div>
				<!-- ----------------------------------------------所有评论------------------------------------------------- -->
				<div class="tab-pane fade" id="AllMyDiscuss">
					<div class="my-forum">
						<h2>全部评论</h2>
						<hr/>
					</div>
				</div>
			    <!-- ----------------------------------------------所有商品------------------------------------------------- -->
			    <!-- 搭建显示页面 -->
			    <div class="tab-pane fade" id="AllMyGoods">
			        <div class="container">
						<h2>全部书籍</h2>
						<hr/>
						<div class="my-goods-container"></div>
			        </div>
			    </div>
			</div>
		</div>
		<div id='reChargeModal' class='modal fade' data-backdrop='static' role='dialog' aria-hidden=true>
			<div class='modal-dialog'>
				<div class='modal-content'>
					<div class='modal-header'>
						<button type='button' class='close' data-dismiss='modal' aria-hidden='true' @click='CloseRe'>&times;</button>
						<h4>充值</h4>
					</div>
					<div class='modal-body'>
						<div>
							<h4>请选择充值额度</h4>
							<div class='form-group'>
								<select class='form-control' id="amount" onclick="custom()">
									<option value="10">10</option>
									<option value="30">30</option>
									<option value="50">50</option>
									<option value="100">100</option>
									<option value="">自定义</option>
								</select>
							</div>
							<input type='hidden' class='form-control' id="custom" >
							<h6>近期充值将会在24小时内到达您的账户，请耐心等待，感谢您的支持</h6>
							<div class='modal-footer'>
								<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
								<button type='button' class='btn btn-primary' data-dismiss='modal' onclick='recharge()'>确定</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</body>
	<script src="../static/js/jquery-3.0.0.min.js"></script>
	<script src="../static/bootstrap/js/bootstrap.js"></script>
	<script src="../static/layui/layui.js" charset="utf-8"></script>
	<script>
		//个人部分
		$(document).ready(function() {
			if(sessionStorage.Authorization!=null){
				$.ajax({
					url: "/user/getUser",
					type: "post",
					headers: {
						Authorization: sessionStorage.Authorization
					},
					success: function (result) {
						if (result.code == 200) {
							var user = result.data;
							$("#name").html(user.name);
							$(".name").html(user.name);
							$(".sex").html(user.sex);
							$(".phone").html(user.phone);
							$(".address").html(user.address);
							$(".balance").html(user.balance);
						}else if(result.code==401){
							sessionStorage.removeItem("Authorization");
							layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
						}else{
							layer.msg(result.msg,{icon: 2,time:2000});
						}
					}
				});
				$.ajax({	//获取商品集合
					url:"/goods/getGoodsList",
					type:"post",
					headers: {
						Authorization: sessionStorage.Authorization
					},
					success:function(result){
						if(result.code==200){
							$.each(result.data,function(index,book){
								$(".my-goods-container").append(
										"<div class='content_news'>"+
										"<div class='content_img'>"+
										"<a href='../goods/goodsDesc.html?id="+book.id+"'><img src='"+book.image+"' /></a>"+
										"</div>"+
										"<div class='content_text'>"+
										"<p class='special'>" +
										"<span>书名："+book.name+"</span>" +
										"<span class='state"+book.id+"'></span>" +
										"</p>"+
										"<p><span>作者："+book.author+"</span></p>"+
										"<p><span>价格："+book.amount+"</span></p>"+
										"<p><span>出版社："+book.press+"</span></p>"+
										"<p><span>书籍详情："+book.introduce+"</span></p>"+
										"<div class='mybt"+book.id+"'></div>"+
										"</div>"+
										"</div>"
								);
								if(book.state == 0){
									$(".state"+book.id).html("书籍已被删除");
									$(".mybt"+book.id).append(
											"<button type='button' onclick='editState("+book.id+",1)' class='btn btn-danger'>重新上架</button>"
									)
								}else if(book.state == 1){
									$(".state"+book.id).html("书籍状态正常");
									$(".mybt"+book.id).append(
											"<button type='button' onclick='edit("+book.id+")' class='btn btn-warning'>修改</button>"+
											"<button type='button' onclick='editState("+book.id+",0)' class='btn btn-danger'>删除</button>"
									);
								}else if(book.state == 2){
									$(".state"+book.id).html("书籍已出售");
								}
							});
						}else if(result.code==401){
							sessionStorage.removeItem("Authorization");
							layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
						}else{
							layer.msg(result.msg,{icon: 2,time:2000});
						}
					}
				});
				$.ajax({	//获取通知
					url:"/forum/getForum",
					type:"post",
					headers:{
						Authorization:sessionStorage.Authorization
					},
					success:function(result){
						if(result.code==200){
							$.each(result.data,function(index,forum){
								forum.createdDate = forum.createdDate.split("T")[0]+" "+forum.createdDate.split("T")[1];
								$(".my-forum").append(
									"<div class='notification'>"+
									"<div class='top-div'>"+
									"<p>"+
									"<span class='label label-info'>时间</span>"+
									"<span style='margin-top: 3px;'>"+forum.createdDate+"</span>"+
									"</p>"+
									"</div>"+
									"<div class='bottom-div'><p>"+forum.content+"</p></div>"+
									"</div>"
								)
							})
						}else if(result.code==401){
							sessionStorage.removeItem("Authorization");
							layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
						}else{
							layer.msg(result.msg,{icon: 2,time:2000});
						}
					}
				});
			}else{
				layer.msg("未登录或登录过期，请登录！",{icon: 2,time:2000},function(){window.location.href="../index.html"});
			}
		});
		function logout() {	//退出登录
			$.ajax({
				url:"/logout",
				type:"post",
				success:function(result){
					if(result.code==200){
						sessionStorage.removeItem("Authorization");
						window.location.href="../index.html";
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			})
		}
		function edit(id) {
			window.location.href="../goods/editGoods.html?id="+id;
		}
		function editState(id,state) {
			$.ajax({
				url: "/goods/editState",
				type: "post",
				data:{
					"id" : id,
					"state" : state
				},
				headers: {
					Authorization: sessionStorage.Authorization
				},
				success: function (result) {
					if (result.code == 200) {
						layer.msg("操作成功！",{icon: 1,time:2000,},function(){window.location.reload()});
					}else if(result.code==401){
						sessionStorage.removeItem("Authorization");
						layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			})
		}
		function custom() {	//自定义充值金额
			if($("#amount").val() == ""){
				$("#custom").attr("type","text")
			}else{
				$("#custom").attr("type","hidden")
			}
		}
		function recharge() {	//充值
			let amount = $("#amount").val();
			if(amount == ""){
				amount = $("#custom").val();
			}
			$.ajax({
				url:"/user/reCharge",
				type:"post",
				data:{
					"amount":amount
				},
				headers:{
					Authorization:sessionStorage.Authorization
				},
				success:function(result){
					if (result.code == 200) {
						layer.msg("充值成功！",{icon: 1,time:2000,},function(){window.location.reload()});
					}else if(result.code==401){
						sessionStorage.removeItem("Authorization");
						layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			})
		}
		$("#reCharge").click(function (){
			//弹出模态框
			$("#reChargeModal").modal("show");
		});
	</script>
</html>
